<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>登录</title>
    <div th:replace="~{fragments/head-base}"></div>
</head>
<body class="body sidebar-left-hidden fixedNav_position fixedMenu_left ">
<div class="preloader" style=" position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  backface-visibility: hidden;
  background: #ffffff;">
    <div class="preloader_img" style="width: 200px;
  height: 200px;
  position: absolute;
  left: 48%;
  top: 48%;
  background-position: center;
z-index: 999999">
        <img th:src="@{/img/loader.gif}" style=" width: 50px;" alt="loading...">
    </div>
</div>
<!--wrap-->
<div id="wrap">
    <div th:replace="~{fragments/top :: top}"></div>
    <!-- /#top -->
    <div class="wrapper fixedNav_top">
        <div th:replace="~{fragments/left :: left}"></div>
        <!-- /#left -->
        <div id="content" class="bg-container">
            <div class="outer">
                <div class="inner bg-container">
                    <!--start-->
                    <!--end-->

                    <div class="row" >
                        <div style="margin: 0 auto;">
                            <div class=" m-t-35  signin_wid" style="width: 400px">
                                <!-- <div class="card-header bg-white">
                                     登录
                                 </div>-->
                                <div>
                                    <!-- logo -->
                                    <div class="m-t-30 text-center">
                                        <img src="img/logo.png" style="width: 120px"/>
                                        <h2 class="mt-4">欢迎来到基于游戏闯关式的程序设计综合编程平台</h2>
                                    </div>
                                    <form class=" mt-3" id="loginForm">
                                        <fieldset>
                                            <!-- Name input-->
                                            <div class="form-group row">
                                                <div class="col-lg-12 user_icon_change2">
                                                    <div class="input-group">
                                                            <span class="input-group-addon">
                                                                <i class="fa fa-user"></i>
                                                            </span>
                                                        <input type="text" class="form-control" maxlength="25" id="username"
                                                               name="username" placeholder="账号或邮箱">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-lg-12">
                                                    <div class="input-group">
                                                            <span class="input-group-addon">
                                                            <i class="fa fa-lock"></i>
                                                        </span>
                                                        <input id = "password" name="password" type="password" maxlength="30" class="form-control"
                                                               placeholder="密码">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <input id="imageCode" name="imageCode" placeholder="验证码" maxlength="4"
                                                           class="w-50 form-control float-right"/>
                                                </div>
                                                <div class="col-6">
                                                    <img th:src="@{/validate/code}" id="imageCodeImg"
                                                         class="float-left mt-1"
                                                         onclick="this.src = 'validate/code?time='+new Date().getTime()"/>
                                                </div>
                                            </div>
                                            <div class="form-group row mt-3">
                                                <div class="col-lg-8" style="margin: 0 auto">
                                                    <a href="javascript:void(0)" onclick="login()"
                                                       class="btn text-white btn-danger w-100 btn-lg glow_button">进入系统</a>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-6 ">
                                                    <label class="custom-control custom-checkbox float-left">
                                                        <input type="checkbox" class="custom-control-input" value="true"
                                                               id="remember-me" name="remember-me">
                                                        <span class="custom-control-indicator"></span>
                                                        <span class="custom-control-description">记住我</span>
                                                    </label>
                                                </div>
                                                <div class="col-6">
                                                    <a th:href="@{/user/forgetPage}"
                                                       class="text-primary float-right">忘记密码?</a>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.inner -->
    </div>
    <!-- /.outer -->
    <!-- /#content -->
    <!-- Modal -->
    <div class="modal fade" id="search_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <form th:action="@{/problem/problemListPage}" method="post">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="float-right" aria-hidden="true">&times;</span>
                    </button>
                    <div class="input-group search_bar_small">
                        <input type="text" class="form-control" placeholder="题目搜索" name="keyword">
                        <span class="input-group-btn">
                          <button class="btn btn-secondary" type="submit"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- /#content -->
    <!-- # right side -->
</div>
<!-- /#wrap -->
<!-- global scripts-->
<div th:replace="~{fragments/footer :: footer}"></div>
<!--end of global scripts-->
<!--  plugin scripts -->
<script th:src="@{/js/pages/login.js}"></script>
<!--end of plugin scripts-->
</body>

</html>
